

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>商品类别管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/layuiadmin/layui/css/layui.css"
	media="all">
<link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>

	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-card-body">
				<div style="padding-bottom: 10px;">
					<button class="layui-btn layuiadmin-btn-list" data-type="batchdel">删除</button>
					<button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
				</div>
				<table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
				<script type="text/html" id="操作列模板">
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit" data-type="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
			</div>
		</div>
	</div>

	<script src="/layuiadmin/layui/layui.js"></script>
	<script>
		layui
				.config({
					base : '/layuiadmin/' //静态资源所在路径
				})
				.extend({
					index : 'lib/index' //主入口模块
				})
				.use(
						[ 'index', 'table' ],
						function() {
							var table = layui.table, form = layui.form;

							// 渲染表格数据
							table.render({
								elem : '#LAY-app-content-list',
								url : '/category/list',
								page : true,
								checkbox : true,
								cols : [ [ {
									checkbox : true
								}, {
									field : 'cid',
									title : 'ID'
								}, {
									field : 'name',
									title : '类别名称'
								}, {
									field : 'sort',
									title : '排序值'
								}, {
									field : 'cid',
									title : '操作',
									toolbar : '#操作列模板'
								} ] ]
							});

							table.on('tool(LAY-app-content-list)',
									function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
										var data = obj.data; //获得当前行数据
										var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
										var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

										if (layEvent == 'del') { //删除
											layer.confirm('真的删除行么', function(
													index) {
												
												//向服务端发送删除指令
												obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
												layer.close(index);
												layui.$.ajax({
													url : "/del",
													type : "get",
													data : { cid: data.cid },
													dataType : "json",
													success : function(res) {
														if (res.code == 0) {
															layer.msg('删除成功')
															table.reload('LAY-app-content-list')
														}
													}
												})
											});
										} else if (layEvent == 'edit') { //编辑
											//do something
											
											layer.open({
												type : 2,
												title : '更改商品种类',
												content : '/edit?cid='+data.cid,
												maxmin : true,
												area : [ '550px', '550px' ],
												end : function() {
													  
													table.reload('LAY-app-content-list')
												}
											});
											
											}
											//同步更新缓存对应的值
											obj.update({
												username : '123',
												title : 'xxx'
											});
										
									});

							var $ = layui.$, active = {
								batchdel : function() {
									var checkStatus = table
											.checkStatus('LAY-app-content-list'), checkData = checkStatus.data; //得到选中的数据
									console.log(checkData);

	
									if (checkData.length === 0) {
										return layer.msg('请选择数据');
									}

									layer.confirm('确定删除吗？', function(index) {
										
	
										//执行 Ajax 后重载
										/*
										admin.req({
										  url: 'xxx'
										  //,……
										});
										 */
										 layui.$.ajax({
											 url:"/group/del",
											 type:"post",
											 dataType:"json",
											 data:{
												 cid:checkData.map(c => c.cid)
													 },
											 success:function(){
												 table.reload('LAY-app-content-list');
												 layer.msg('已删除');
											 }
										 })
										
									});
								},
								add : function() {
									layer.open({
												type : 2,
												title : '添加商品种类',
												content : '/category/add',
												maxmin : true,
												area : [ '550px', '550px' ],
												end : function() {
													console.log('已重载')
													table
															.reload('LAY-app-content-list')
												}
											});
								}
							};

							$('.layui-btn.layuiadmin-btn-list').on(
									'click',
									function() {
										var type = $(this).data('type');
										active[type] ? active[type].call(this)
												: '';
									});

						});
	</script>
</body>
</html>
